<template>
  <div class="all">
    <!--    头部 标题-->
    <van-sticky class="header" :offset-top="0">
      <van-nav-bar>
        <template #left>
        <span @click="onClickLeft" class="fanhui">
          <img src="../../assets/返回.png" style="width: 7px;
    height: 13px;" alt="">
          返回
        </span>
        </template>
        <template #title>
          <span v-if="type === '3'">康复训练评估</span>
          <span v-else>自我评估</span>
        </template>
        <template #right>
          <span style="color: #1DA4F2;font-size: 15px;font-weight: bold;font-family: PingFang SC;" @click="clickSend()" v-if="isSend === false">提交</span>
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="banner">
      <span>{{bannerTitle}}</span>
      <img @click="show=!show" src="../../assets/pingGu.png" alt=""
           style="width: 75px;height: 75px; position: fixed;right: 5%;top: 25vw;z-index: 9999">
      <van-popup v-model="show" round position="right" :style="{width: '70%',height: '50%',marginRight: '5vw'}">
        <div class="pop_box">
          <ul>
            <li v-for="(item, index) in list" :key="index" @click="jump(index)">
              <div class="pop_left">{{index+1}}、{{item.SUBJECT_NAME}}</div>
              <div class="pop_right" v-if="allList[index].CHOOSE_ID !== null">已评估</div>
            </li>
          </ul>
        </div>
      </van-popup>
    </div>
    <div class="main">
      <div class="warp">
        <div class="cnt" >
        <div class="cnt_all" v-show="index === Index"  v-for="(item, index) in list" :key="index">
            <div class="cnt_header">{{index+1}}、{{item.SUBJECT_NAME}}</div>
            <div class="cnt_content">
              <van-radio-group  v-model="value" v-for="(sub, subIndex) in item.chooses" :key="subIndex">
                <van-radio
                  class="radio"
                  @click="selSubject(sub.POINTS, item.ID, sub.ID, radio[index])"
                  :name="sub.ID"
                  checked-color="#1DA4F2"
                  icon-size="4vw">
                  {{sub.CHOOSE_NAME}}
                </van-radio>
              </van-radio-group>
            </div>
        </div>
        <div v-if="Index != list.length && isSend === false" class="bottom">
          <button class="btn" @click="last()" v-if="Index > 0">上一题</button>
          <button class="btn" v-else> </button>
          <span v-if="isSend === false" style="font-size: 20px;
color: #1DA4F2;">{{Index + 1}}/{{list.length}}</span>
          <button class="btn" @click="next()" v-if="isSend === false && this.Index+1 !== this.list.length">下一题</button>
          <button class="btn" v-else></button>
        </div>
        <div v-else-if="isSend === true" class="issue" id="issue">
          <textarea class="xiu"  v-model="result" @keyup="keyup()"></textarea>
          <a>小提示：结果可编辑</a>
          <span>总分为:{{allPoints}}</span>
          <button class="but1" id="fenxiang" @click="finish()">完成</button>
        </div>
        <div class="loading" v-else>
          <van-loading  size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
        </div>
      </div>
      </div>
    </div>
    <van-dialog v-model="isShow"
                width="55%"
                confirm-button-color="#1da4f2"
                title="尚有未评定的项目，是否确认提交？"
                @confirm="onConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
// import axios from 'axios'
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'Zlcs',
  data () {
    return {
      list: [], // 存储所有题目和对应答案
      radio: [],
      Index: 0,
      arr: [], // 存储每个选择的答案的 分数 选项对应的题号
      userid: '', // 存储userid
      allPoints: 0, // 存储所有总分
      points: [], // 存储所选的分数
      assessid: 0, // 存储
      bannerTitle: '', // 存储头部标题
      result: '', // 存储最后结果
      show: false,
      isShow: false,
      value: 1,
      value1: 1,
      allList: [],
      isTi: false,
      isSend: false, // 是否点击提交
      disid: '', // 存储disid
      type: '', // 判断当前所处类型
      assess_self_typeIndex: ''
    }
  },
  mounted () {
    console.log($(window).height())
    $('.all').css('height', $(window).height() + 'px')
    // 从网址上截取 userid
    this.userid = this.$utils.getUrlKey('userid')
    this.assess_self_typeIndex = this.$utils.getUrlKey('assess_self_typeIndex')
    this.assessid = this.$utils.getUrlKey('assessid')
    this.type = this.$utils.getUrlKey('type')
    if (this.type === '3') {
      document.title = '康复训练评估'
      this.disid = this.$utils.getUrlKey('disid')
    } else {
      document.title = '自我评估'
      this.disid = ''
    }
    this.getList()
  },
  methods: {
    onConfirm () {
      this.isSend = true
      let sum = 0
      this.points.forEach(item => {
        sum = sum + item
      })
      this.Index = -1
      this.allPoints = sum
      this.$http.getResult({ASSESS_ID: this.assessid, ALL_POINTS: this.allPoints})
        .then(res => {
          // console.log(res)
          this.result = res.data.RESULT
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击提交 http://jmx-kfdj.com/kfhl/miniassess/getResult
    clickSend () {
      var isNull
      this.radio.forEach(item => {
        if (item === '') {
          isNull = item
        } else {
          this.isTi = true
        }
      })
      if (isNull === '') {
        if (this.isTi === true) {
          this.isShow = true
        } else {
          Toast('请提交至少一题')
        }
      } else {
        this.isSend = true
        let sum = 0
        this.points.forEach(item => {
          sum = sum + item
        })
        this.Index = -1
        this.allPoints = sum
        this.$http.getResult({ASSESS_ID: this.assessid, ALL_POINTS: this.allPoints})
          .then(res => {
            // console.log(res)
            this.result = res.data.RESULT
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 点击返回
    onClickLeft () {
      // 返回上一页
      this.$router.go(-1)
    },
    // 点击弹窗列表跳转页面
    jump (index) {
      this.show = false
      this.Index = index
      this.value = this.radio[this.Index]
      this.isSend = false
    },
    keyup () {
      // console.log(this.result)
    },
    // 点击上一题
    last () {
      if (this.Index === 0) {
        this.Index = 0
      } else {
        this.Index--
        this.value = this.radio[this.Index]
      }
    },
    // 点击下一题
    next () {
      this.Index++
      this.value = this.radio[this.Index]
    },
    // 点击 题目的 答案
    selSubject (points, subjectId, chooseId, name) {
      if (this.value1 === this.value) {
        this.value = ''
        var pop = {
          'SUBJECT_ID': null,
          'CHOOSE_ID': null,
          'POINTS': null
        }
        this.allList[this.Index] = pop
        this.radio[this.Index] = ''
        this.points[this.Index] = 0
        this.isTi = false
      } else {
        this.isTi = true
        // this.value1 = this.value
        var obj = {
          'SUBJECT_ID': subjectId,
          'CHOOSE_ID': chooseId,
          'POINTS': points
        }
        this.allList[this.Index] = obj
        this.radio[this.Index] = chooseId
        this.points[this.Index] = points
      }
      this.value1 = this.value
      // console.log(this.allList)
      // console.log(this.radio)
      // console.log(this.points)
    },
    // 获取题目 http://jmx-kfdj.com/kfhl/miniassess/getSubjects
    getList () {
      this.$http.getSubjects({ID: this.assessid})
        .then(res => {
          // console.log(res)
          this.bannerTitle = res.data.ASSESS_NAME
          this.list = res.data.subjects
          console.log(this.list)
          for (var i = 0; i < res.data.subjects.length; i++) {
            var obj = {
              'SUBJECT_ID': null,
              'CHOOSE_ID': null,
              'POINTS': null
            }
            this.allList.push(obj)
            this.radio.push('')
            this.points.push(0)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击完成 http://jmx-kfdj.com/kfhl/miniassess/submit
    finish () {
      // axios.post('http://jmx-kfdj.com/kfhl/miniassess/submit',
      //   {'USER_ID': this.userid, 'ASSESS_ID': this.assessid, 'ASSESS_RESULT': this.result,
      //   'ALL_POINTS': this.allPoints, 'TYPE': 1, 'ANSWERS': this.allList})
      if (Number(this.type) === 3) {
        this.$http.submit({
          ASSESS_ID: this.assessid,
          ASSESS_RESULT: this.result,
          ALL_POINTS: this.allPoints,
          TYPE: this.type,
          ASSESS_SELF_TYPE: this.assess_self_typeIndex,
          DIS_ID: this.disid,
          ANSWERS: this.allList})
          .then(res => {
            // console.log(res)
            this.$router.go(-1)
          })
          .catch(err => {
            console.log(err)
          })
      } else if (Number(this.type) === 2) {
        this.$http.submit({
          ASSESS_ID: this.assessid,
          ASSESS_RESULT: this.result,
          ALL_POINTS: this.allPoints,
          TYPE: this.type,
          ASSESS_SELF_TYPE: this.assess_self_typeIndex,
          PATIENT_USER_ID: this.userid, // type 为2时
          ANSWERS: this.allList})
          .then(res => {
            // console.log(res)
            this.$router.go(-1)
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        this.$http.submit({
          ASSESS_ID: this.assessid,
          ASSESS_RESULT: this.result,
          ALL_POINTS: this.allPoints,
          TYPE: this.type,
          ASSESS_SELF_TYPE: this.assess_self_typeIndex,
          ANSWERS: this.allList})
          .then(res => {
            // console.log(res)
            this.$router.go(-1)
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
/deep/ .van-nav-bar{
  height: 12vw;
}
.loading {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .van-loading__text{
  font-size: 15px;
  /*color: rgba(29, 164, 242, 0.8);*/
}
.fanhui {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: bold;
  color: #1da4f2;
  font-family: PingFang SC;
}
.fanhui img{
  margin-right: 5px;
}
/deep/ .van-nav-bar__left, /deep/ .van-nav-bar__right{
  padding: 0 15px;
  font-size: 15px;
}
.all{
  width: 100%;
  height: 100vh;
  background: url(../../assets/banner2.png) center;
  background-repeat: no-repeat;
  background-position-y: 25%;
  background-color: rgba(29, 164, 242, 0.8);
  background-size: 100%;
}
  .banner{
    width: 100vw;
    /*height: 70vw;*/
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-top: 5vw;
  }
.banner span{
  font-size: 20px;
  color: #fff;
}
  .banner img{
    width: 100vw;
    height: 70vw;
  }
  .cnt{
    /*width: 90%;*/
    /*height: 75vw;*/
    /*margin: 0 auto;*/
    /*border-radius: 20px;*/
    /*border: 1px solid;*/
    /*margin-top: 60%;*/
    /*overflow: scroll;*/
    /*background-color: #fff;*/
    /*position: relative;*/
    width: 90%;
   height: 70vw;
    margin: 0 auto;
    border-radius: 20px;
    border: 1px solid;
    margin-top: 45%;
    overflow: scroll;
    background-color: #fff;
    /*position: relative;*/
  }
  .pop_box li {
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
    padding: 3vw;
    display: flex;
  }
  .pop_right{
    color: red;
  }
  .pop_left{
    width: 75%;
    overflow: hidden;/*超出部分隐藏*/
    text-overflow:ellipsis;/* 超出部分显示省略号 */
    white-space: nowrap;/*规定段落中的文本不进行换行 */
  }
  .pop_box{
    width: 100%;
    height: 100%;
    overflow: scroll;
    margin: 0 auto;
  }
  .cnt_all{
    /*height: 59vw;*/
    height: 75%;
  }
  .cnt_header{
    font-size: 17px;
    font-family: PingFang SC;
    width: 92%;
    margin: 5vw auto 3vw auto;
  }
  .cnt_content{
    /*width: 92%;*/
    /*height: 45vw;*/
    /*!*background-color: #1da3f2;*!*/
    /*margin: 0 auto;*/
    /*font-size: 4.5vw;*/
    /*font-family: PingFang SC;*/
    /*overflow: scroll;*/
    width: 92%;
    height: 80%;
    /* height: 45vw; */
    margin: 0 auto;
    font-size: 4.5vw;
    font-family: PingFang SC;
    overflow: scroll;
  }
  .cnt_content label{
  }
  .radio{
    margin: 3vw auto;
    display: flex;
    align-items: center;
  }
  /deep/ .radio .van-radio__label{
    font-family: PingFang SC;
    font-size: 15px;
  }
  .btn{
    width: 20vw;
    height: 8vw;
    border-radius: 15px;
    border: none;
    background-color: #fff;
    color: #1DA4F2;
    font-size: 20px;
    margin: 0 10px;
  }
  .issue{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
  }
  .issue a{
    width: 90%;
    color: #999999;
    margin-bottom: 2vw;
  }
  .issue span{
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .issue button{
    width: 150px;
    height: 44px;
    background: #1DA4F2;
    border-radius: 44px;
    font-size: 17px;
  }
.xiu{
    width: 90%;
    height: 27vw;
    border: 1px solid #E5E5E5;
    text-align: left;
    outline: none;
    margin-bottom: 2vw;
    padding: 8vw;
    border-radius: 15px;
    box-sizing: border-box;
    background: rgba(18, 203, 105, 0.1);
    color: #1DA4F2;
    resize: none;
  }
  .xiu:focus{
    /*border: 1px solid #07c160;*/
  }
  .but1{
    width: 20vw;
    height: 10vw;
    color: white;
    border: none;
    background-color: #2F9EE5;
    border-radius: 20px;
    margin-top: 5vw;
  }
  .bottom{
    width: 100%;
    /*position: absolute;*/
    /*bottom: 6px;*/
    height: 30px;
    position: sticky;
    bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/ .van-checkbox{
    margin-top: 3vw;
  }
  /deep/ .van-popup--right{
    border-radius: 15px !important;
  }
  /deep/ .van-popup--round{
    border-radius: 15px !important;
  }
  /deep/ .van-nav-bar__title {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  /deep/ .van-image__img{
    width: 11vw;
  }
  /deep/ .van-dialog__header--isolated {
    padding: 24px 17px;
  }
</style>
